<template>
    <span :ref="drag" :style="{ opacity, color }" class="text-xs border border-gray-200 rounded-lg p-1 text-center">
        {{ props.option.label }}
    </span>
</template>

<script setup>
import { ref } from 'vue'
import { useDrag } from 'vue3-dnd'
import { toRefs } from '@vueuse/core'
import { useFormJsonStore } from '../stores/form-json.js'
const formJsonStore = useFormJsonStore()

const props = defineProps({
    option: Object,
})
const [collect, drag] = useDrag(() => ({
    type: props.option.type, // 拖动类型
    item: { ...props.option, id: 12344 },
    end(item, monitor) {
        // item 拖动元素
        console.log('item', item.name)

        // monitor 拖动监控器
        const dropResult = monitor.getDropResult()
        console.log('dropResult', dropResult)
        // 生成一个随机字符串

        if (item && dropResult) {
            let data = name
            // formJsonStore.setCurrentFormJson(data)
            // let alertMessage = ''
            // const isDropAllowed =
            //     dropResult.allowedDropEffect === 'any' ||
            //     dropResult.allowedDropEffect === dropResult.dropEffect

            // if (isDropAllowed) {
            //     const isCopyAction = dropResult.dropEffect === 'copy'
            //     const actionName = isCopyAction ? 'copied' : 'moved'
            //     alertMessage = `You ${actionName} ${item.name} into ${dropResult.name}!`
            // } else {
            //     alertMessage = `You cannot ${dropResult.dropEffect} an item into the ${dropResult.name}`
            // }
            // alert(alertMessage)
        }
    },
    collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.4 : 1,
        color: monitor.isDragging() ? 'red' : undefined,
    }),
}))
const { opacity, color } = toRefs(collect)


</script>